<template>
  <el-dialog :close-on-click-modal="false" title="跟进记录" :visible.sync="dialogVisible" width="800px">
    <div style="overflow: hidden">
      <el-table ref="productTable"
                :data="list"
                style="width: 100%;font-size: 12px;"
                v-loading="listLoading"
                border>
        <el-table-column label="客户名称"  align="center" min-width="150">
          <template slot-scope="scope">{{scope.row.customerName}}</template>
        </el-table-column>
        <el-table-column label="联系人姓名"  align="center" min-width="100">
          <template slot-scope="scope">{{scope.row.contactName }}</template>
        </el-table-column>
        <el-table-column label="产品线"  align="center" min-width="150">
          <template slot-scope="scope">{{scope.row.goodsLineName}}</template>
        </el-table-column>
        <el-table-column label="跟进方式"  align="center" min-width="100">
          <template slot-scope="scope">{{scope.row.trackingTypeName}}</template>
        </el-table-column>
        <el-table-column label="跟进内容"  align="center" min-width="150" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.trackingContent}}</template>
        </el-table-column>
        <el-table-column label="下次跟进时间" align="center" min-width="150">
          <template slot-scope="scope">{{scope.row.nextTrackingTime}}</template>
        </el-table-column>
        <el-table-column label="备注" align="center" min-width="150" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.trackingRemark}}</template>
        </el-table-column>
        <el-table-column label="客户行业"  align="center" min-width="100">
          <template slot-scope="scope">{{scope.row.customerNewIndustry}}</template>
        </el-table-column>
        <el-table-column label="月使用量"  align="center" min-width="100">
          <template slot-scope="scope">{{scope.row.cglMonthBuyNum}}</template>
        </el-table-column>
        <el-table-column label="规模"  align="center" min-width="100">
          <template slot-scope="scope">{{scope.row.cglScale}}</template>
        </el-table-column>
        <el-table-column label="开工率"  align="center" min-width="100">
          <template slot-scope="scope">{{scope.row.cglOperatingRate}}</template>
        </el-table-column>
        <el-table-column label="对手情况"  align="center" min-width="100">
          <template slot-scope="scope">{{scope.row.cglCompetitorInfoName}}</template>
        </el-table-column>
        <el-table-column label="付款方式"  align="center" min-width="100">
          <template slot-scope="scope">{{scope.row.cglPayMethod}}</template>
        </el-table-column>
        <el-table-column label="创建时间"  align="center" min-width="100">
          <template slot-scope="scope">{{scope.row.createTime}}</template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.pageSize"
          :page-sizes="[10,15,20]"
          :current-page.sync="listQuery.pageNum"
          :total="count">
        </el-pagination>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import {customerNewTrackingList,} from '@/api/company'
import {planGoodsListScheduled,} from '@/api/order'
import {formatDate} from '@/utils/date';

import store from '@/store'
import { mapGetters } from 'vuex'

const defaultListQuery={
  "tab": '4' ,   //1:  我负责的  2 共享 3 部门 4 全部
  "goodsLineId":'' ,    //产品线id筛选,
  "customerName": '' ,   //客户名称,
  "customerId": '',    //客户id,
  "userId": '' ,   //负责人id,
  "trackingUserId": '' ,  //跟进人id,
  "date": [] ,   //时间,
  "trackingContent":'' ,    //跟进内容,
  "trackingTypeId": '' ,   //跟进方式,
  "contactName":'',
  "cglId":'',
  isMy:1,
  "pageNum" : 1,
  "pageSize" : 10
};


export default {
  name: "index",
  data(){
    return {
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      count: 0,
      listLoading: false,
      list:[],
      dialogVisible:false
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {

  },
  created() {

  },
  filters: {

  },
  methods:{
    //显示
    showPop(item,type){
       this.dialogVisible = true;
       if(type == 'customer'){
         console.log("111111",item)
         this.listQuery.customerId = item.customerId;
       }else{
         console.log("2222222222")
         console.log("111111",item)
         this.listQuery.cglId = item.cglId
       }
       this.getList()
    },


    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getList();
    },
    //获取列表
    getList() {
      this.listLoading = true;
      customerNewTrackingList(this.listQuery).then(response => {
        this.list = response.list;
        this.count = response.count;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      });
    },

  },
}
</script>

<style  lang="scss">

</style>
